<template>
	<div id="vip-detail">
		<div class="content-vipdetail">
			<div class="box-left">
				<!-- 学员信息 -->
				<div class="box-studentInfo">
					<img v-if="studentInfo.photo" class="photo" :src="studentInfo.photo" />
					<img v-else class="photo" />
					<span class="name">{{studentInfo.name}}({{genderMap[studentInfo.gender]||'未知'}})</span>
					<span class="phone">电话：{{studentInfo.phone}}</span>
					<!-- <span class="vipCardNo">会员卡号：{{studentInfo.vipCardNo}}</span> -->
				</div>
			</div>
			<div class="box-right">
				<!-- 充值记录 -->
				<div class="record-charge">
					<div class="row">会员充值记录</div>
					<table class="table" cellspacing="0">
						<thead class="thead">
							<tr>
								<td style="width: 2rem;">充值时间</td>
								<td style="width: 2.5rem;">卡号</td>
								<td style="width: 0.8rem;">会员卡</td>
								<td style="width: 1.5rem;">权益开始日期</td>
								<td style="width: 1.5rem;">权益结束日期</td>
								<td style="width: 0.8rem;">状态</td>
								<td style="width: 0.8rem;">操作</td>
							</tr>
						</thead>
						<tbody class="tbody" v-if="chargeRecordList&&chargeRecordList.length>0">
							<tr v-for="(item,index) in chargeRecordList" :key="index">
								<td>{{item.accountDate}}</td>
								<td>{{item.vipCardNo}}</td>
								<td>{{item.studentCardName}}</td>
								<td>{{item.effectiveDate.substr(0,10)}}</td>
								<td>{{item.effectiveDateEnd.substr(0,10)}}</td>
								<td>{{item.isCan==0?'无效':'有效'}}</td>
								<td>
									<el-button disabled type="text" style="font-size:0.16rem;">退卡</el-button>
								</td>
							</tr>
						</tbody>
						<tbody class="tbody" v-else>
							<tr>
								<td colspan="7" align="center">暂无充值记录</td>
							</tr>
						</tbody>
					</table>
				</div>
				<!-- 约课记录 -->
				<div class="record-course">
					<div class="row" style="display:flex;justify-content: space-between;
    					align-items: flex-end;margin-top:0.16rem;">
						<span>约课记录</span>
						<div style="display: flex;align-items: flex-end;">
							<el-date-picker
								size="small"
								v-model="courseTime"
								type="daterange"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								@change="courseTimeChange"
								:default-time="['00:00:00', '23:59:59']">
							</el-date-picker>
							<el-input
								size="small"
								style="margin-left:0.1rem;width: 2rem;"
								placeholder="搜索 课程名称"
								v-model="courseSearchParam.keyword"
								clearable
								maxlength="30"
								class="input_search"
							></el-input>
							<div class="search_btn" v-if="hasApi('vipDetailCourseList')"
							 style="margin-left:0.1rem;" @click="search(1)">搜索</div>
						</div>
					</div>
					<table class="table" cellspacing="0">
						<thead class="thead">
							<tr>
								<td style="width: 2rem;">约课时间</td>
								<td style="width: 2rem;">课程</td>
								<td style="width: 2rem;">班级</td>
								<td style="width: 1.23rem;">上课时间</td>
								<td style="width: 1rem;"></td><!-- 上课状态 -->
								<td style="width: 1rem;">约课状态</td>
							</tr>
						</thead>
						<tbody class="tbody" v-if="courseRecordList&&courseRecordList.length>0">
							<tr v-for="(item,index) in courseRecordList" :key="index">
								<td>{{item.createTime}}</td>
								<td>{{item.courseName}}</td>
								<td>{{item.className}}</td>
								<td style="white-space: pre-line;">{{item.courseRangeTime}}</td>
								<td>
									<div class="courseState" :courseState="item.courseState">{{courseStateMap[item.courseState]}}</div>
								</td>
								<td>{{subscriptionStatusMap[item.status]}}</td>
							</tr>
						</tbody>
						<tbody class="tbody" v-else>
							<tr>
								<td colspan="6" align="center">暂无约课记录</td>
							</tr>
						</tbody>
					</table>
					<el-pagination
						class="page"
						layout="total, sizes, prev, pager, next, jumper"
						:current-page="courseSearchParam.currPage"
						@size-change="pageSizeChange"
						@current-change="curPageChange"
						:total="courseSearchParam.total"
					></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let vm;
	export default{
		components:{},
		props:[],
		data(){
			return {
				genderMap:{},
				subscriptionStatusMap:{},
				courseStateMap:{1:'待上课',2:'上课中',3:'已结课'},
				studentInfo:{
					name:'',
					gender:'',
					phone:'',
					vipCardNo:'',
					photo:''
				},
				courseTime:null,
				courseSearchParam:{
					clueId:"",
					startTime:'',
					endTime:'',
					keyword:'',
					currPage:1,
					pageSize:10,
					total:0,
				},
				chargeRecordList:[],
				courseRecordList:[],
			};
		},
		methods:{
			init(data){
				this.studentInfo=data.studentInfo;
				this.courseSearchParam.clueId=data.clueId;
				/**会员充值记录 */
				this.getChargeRecord(data.clueId);
				//约课记录
				this.search(1);
			},
			/**会员充值记录 */
			getChargeRecord(clueId){
				api.vipDetailChargeList({
					campusId:this.$store.state.campusId,
					clueId:clueId,
					pageSize:10,
				}).then(function(data){
					if(data.resultCode==2000){
						vm.chargeRecordList=data.list;
					}
				});
			},
			pageSizeChange(val){
				this.courseSearchParam.pageSize = val;
      			this.search(1);
			},
			curPageChange(val){
				this.search(val);
			},
			courseTimeChange(val){
				if(val&&val.length==2){
					this.courseSearchParam.startTime=tool.DateToString(val[0],'yyyy-MM-dd HH:mm:ss');
					this.courseSearchParam.endTime=tool.DateToString(val[1],'yyyy-MM-dd HH:mm:ss');
				}
				else{
					this.courseSearchParam.startTime='';
					this.courseSearchParam.endTime='';
				}
				this.search(1);
			},
			search(pgIndex){
				this.courseSearchParam.currPage=pgIndex||this.courseSearchParam.currPage;
				api.vipDetailCourseList(this.courseSearchParam).then(function(data){
					if(data.resultCode==2000){
						vm.courseRecordList=data.list;
						vm.courseSearchParam.total=data.totalCount;
						let now=tool.DateToString(new Date(),'yyyy-MM-dd HH:mm');
						vm.courseRecordList.forEach(ele=>{
							if(ele.startTime&&ele.endTime){
								//上课状态
								let courseState='';
								if(ele.startTime<now){
									courseState=1;
								}
								else if(ele.startTime>=now&&ele.endTime<=now){
									courseState=2;
								}
								else{
									courseState=3;
								}
								ele.courseState=courseState;
								//上课时间
								ele.courseRangeTime=ele.startTime.split(' ')[0]+'\n'+
								ele.startTime.split(' ')[1]+'~'+ele.endTime.split(' ')[1];
							}

						});
					}
				});
			},
		},
		mounted(){
			this.genderMap=tool.getDictNameByValue(-100,'gender',false);
			this.subscriptionStatusMap=tool.getDictNameByValue(-100,'subscription_status',false);
			vm=this;
		},
		computed:{
			
		},
		watch:{

		}
	}
</script>

<style scoped src="@/style/module/table.css"></style>
<style  lang="scss">
	#vip-detail{
		color: #666666;
		font-size: 0.16rem;
		.content-vipdetail{
			display: flex;
			justify-content: space-between;
			.row{
				width: 100%;
				margin-bottom: 0.08rem;
			}
			.box-left{
				width: 2rem;
				height: 100%;
				text-align: center;
				.box-studentInfo{
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 2rem;
					height: 2.4rem;
					color: #606266;
					background: #f8f8f8;
					border: 0.01rem solid #EBEBEB;
					.photo{
						width: 1rem;
						height: 1rem;
						border-radius: 0.5rem;
						background-image: url("~@/assets/img/common/top_portait.png");
						background-repeat: no-repeat;
						background-size: 100% 100%;
						margin: 0.2rem 0;
					}
					.name{
						font-size: 0.18rem;
						font-weight: bold;
						margin-bottom: 0.1rem;
					}
					.phone{
						margin-bottom: 0.1rem;
					}
				}
			}
			.box-right{
				width: 9.35rem;
				height: 100%;
				.record-charge{
					width: 100%;
					height: auto;
				}
				.record-course{
					width: 100%;
					height: auto;
				}
			}
			.el-input__icon {
				line-height: 0.3rem;
			}

			.courseState{
				border: 0.01rem solid;
				font-size: 0.14rem;
				width: 0.6rem;
    			border-radius: 0.1rem;
			}
			.courseState[courseState='1']{
				border-color: rgb(31, 160, 254);
				color: rgb(31, 160, 254);
			}
			.courseState[courseState='2']{
				border-color: rgb(31, 160, 254);
				color: rgb(31, 160, 254);
			}
			.courseState[courseState='3']{
				border-color: #666666;
				color: #666666;
			}
		}
		
		// 滚动条
		.scrollbarstyle::-webkit-scrollbar {
			width: 0.05rem;
		}
		.scrollbarstyle::-webkit-scrollbar-thumb {
			border-radius: 0.5rem;
			background: #BBBBBB;
		}
		.scrollbarstyle::-webkit-scrollbar-track {
			background: #F2F6FC;
		}
		.el-table__body-wrapper::-webkit-scrollbar {
			width: 0.05rem;
		}
		.el-table__body-wrapper::-webkit-scrollbar-thumb {
			border-radius: 0.5rem;
			background: #BBBBBB;
		}
		.el-table__body-wrapper::-webkit-scrollbar-track {
			background: #F2F6FC;
		}
	}
</style>